<template>
  <div class="state">
    <button
      v-preventReClick
      :class="{ is_active: currentIndex === index }"
      v-for="(item, index) in props.baseState"
      :key="(item as string)"
      @click="activeHandle(index)"
    >
      {{ item }}
    </button>
  </div>
</template>

<script lang="ts" name="baseState" setup>
  import { ref } from 'vue'
  let isActive = ref(false)
  let currentIndex = ref(0)
  const props = defineProps<{
    baseState: string[]
  }>()
  const emits = defineEmits(['stateHandle'])
  const activeHandle = (index: number) => {
    currentIndex.value = index
    isActive.value = false
    emits('stateHandle', index)
  }
</script>

<style scoped lang="less">
  .state {
    button {
      padding: 5px;
      background-color: #fff;
      border: none;
      font-size: 14px;
      color: #000;
      margin-bottom: 12px;
      margin-right: 16px;
      cursor: pointer;
    }
  }
  .is_active {
    font-weight: 700;
  }
</style>
